import React from 'react';
import { observer } from 'mobx-react';
import PropTypes from 'prop-types';
import sloeActionCONST from 'common/const/ease';
import Group from 'components/config/group';
import Range from 'components/config/range';
import Input from 'components/config/input';
import Select from 'components/config/select';
import SlowAction from 'components/config/slowAction';
import motionCONST from 'common/const/observer/motion';
import css from './index.less';

@observer
export default class Config extends React.Component {

  static propTypes = {
    frame: PropTypes.object.isRequired
  };

  render() {
    const { frame } = this.props;
    if (frame === frame.parent.list[0]) return <p className={css.noSet}>初始帧不能修改！</p>;

    const { current } = frame;
    if (current.lock) return <p className={css.noSet}>元素被锁定！</p>;

    let obData = {};
    motionCONST.forEach(style => {
      obData[style.key] = current[style.key];
    });

    let slowActionProps = {};
    sloeActionCONST.forEach(item => {
      if (obData.ease === item.name) {
        slowActionProps = item;
      }
    });

    const groupProps = {
      list: [
        {
          title: '位置',
          children: (
            <div>
              <Input value={obData.left}
                     label="X"
                     type="number"
                     onChange={val => {
                       current.update('left', val);
                     }} />
              <Input value={obData.top}
                     label="Y"
                     type="number"
                     onChange={val => {
                       current.update('top', val);
                     }} />
              <Input value={obData.width}
                     label="宽"
                     type="number"
                     onChange={val => {
                       current.update('width', val);
                     }} />
              <Input value={obData.height}
                     label="高"
                     type="number"
                     onChange={val => {
                       current.update('height', val);
                     }} />
            </div>
          )
        },
        {
          title: '旋转 缩放 倾斜',
          children: (
            <div>
              <Range label="Z轴旋转"
                     onChange={val => {
                       current.update('rotate', val);
                     }}
                     textWidth={58}
                     min={0}
                     max={360}
                     value={obData.rotate} />
              <Range label="X轴旋转"
                     onChange={val => {
                       current.update('rotateX', val);
                     }}
                     textWidth={58}
                     min={0}
                     max={360}
                     value={obData.rotateX} />
              <Range label="Y轴旋转"
                     onChange={val => {
                       current.update('rotateY', val);
                     }}
                     textWidth={58}
                     min={0}
                     max={360}
                     value={obData.rotateY} />
              <Range label="水平缩放"
                     onChange={val => {
                       current.update('scaleX', val);
                     }}
                     textWidth={58}
                     min={0}
                     max={200}
                     value={obData.scaleX} />
              <Range label="垂直缩放"
                     onChange={val => {
                       current.update('scaleY', val);
                     }}
                     textWidth={58}
                     min={0}
                     max={200}
                     value={obData.scaleY} />
              <Range label="水平倾斜"
                     onChange={val => {
                       current.update('skewX', val);
                     }}
                     textWidth={58}
                     min={0}
                     max={180}
                     value={obData.skewX} />
              <Range label="垂直倾斜"
                     onChange={val => {
                       current.update('skewY', val);
                     }}
                     textWidth={58}
                     min={0}
                     max={180}
                     value={obData.skewY} />
            </div>
          )
        },
        // {
        //   title: '旋转中心',
        //   children: (
        //     <div>
        //       <Input value={obData.transformOriginX}
        //              label="X"
        //              type="number"
        //              onChange={val => {
        //                current.update('transformOriginX', val);
        //              }} />
        //       <Input value={obData.transformOriginY}
        //              label="X"
        //              type="number"
        //              onChange={val => {
        //                current.update('transformOriginY', val);
        //              }} />
        //     </div>
        //   )
        // },
        {
          title: '其他',
          children: (
            <div>
              <Range label="模糊"
                     onChange={val => {
                       current.update('blur', val);
                     }}
                     min={0}
                     max={10}
                     value={obData.blur} />
              {/*
              <Range label="灰度"
                     onChange={val => {
                       current.update('grayScale', val);
                     }}
                     min={0}
                     max={100}
                     value={grayScale} />
              <Range label="亮度"
                     onChange={val => {
                       current.update('brightness', val);
                     }}
                     min={0}
                     max={200}
                     value={brightness} />
              <Range label="对比度"
                     onChange={val => {
                       current.update('contrast', val);
                     }}
                     min={0}
                     max={200}
                     value={contrast} />
              <Range label="褐色度"
                     onChange={val => {
                       current.update('sepia', val);
                     }}
                     min={0}
                     max={100}
                     value={sepia} />
              <Range label="饱和度"
                     onChange={val => {
                       current.update('saturate', val);
                     }}
                     min={0}
                     max={200}
                     value={saturate} />
              <Range label="反转图像"
                     onChange={val => {
                       current.update('invert', val);
                     }}
                     min={0}
                     max={100}
                     value={invert} />
              <Range label="色相旋转"
                     onChange={val => {
                       current.update('hueRotate', val);
                     }}
                     min={0}
                     max={360}
                     value={hueRotate} />
              */}
              <Range label="透明"
                     onChange={val => {
                       current.update('opacity', val);
                     }}
                     min={0}
                     max={100}
                     value={obData.opacity} />
              <Range label="圆角"
                     onChange={val => {
                       current.update('borderRadius', val);
                     }}
                     min={0}
                     max={100}
                     value={obData.borderRadius} />
              <Range label="边框宽度"
                     onChange={val => {
                       current.update('borderWidth', val);
                     }}
                     min={1}
                     max={100}
                     value={obData.borderWidth} />
            </div>
          )
        },
        {
          title: '速率曲线',
          children: (
            <div>
              <Select value={obData.ease}
                      label="缓动函数"
                      options={
                        sloeActionCONST.map(item => {
                          return {
                            label: item.name,
                            val: item.name,
                          };
                        })
                      }
                      onChange={val => {
                        current.update('ease', val);
                      }} />
              <SlowAction {...slowActionProps}/>
            </div>
          )
        },
      ]
    };
    return (
      <Group {...groupProps}/>
    );
  }
}
